<template>
  <div class="bg">
    <div class="landingPage">
      <div class="first" id="first">
        <nav class="nav" :class="navBarFixed == true ? 'navBarWrap' :''">
          <div class="icon">
            <img src="../assets/img/flat-color-icons_search.png" alt="">
            <span>创思找工作</span>
          </div>
          <div class="navItems">
            <a href="#first">首页</a>
            <a href="#second">岗位展示</a>
            <a href="#thirdly">工作分类</a>
            <a href="#fourthly">关于创思</a>
            <a href="#" @click="login">登录</a>
          </div>
          <el-button class="buttonDiv">发布岗位</el-button>
        </nav>
        <span class="con1">269+ 岗位需求</span>
        <span class="con2">预祝你在创思信息找到心仪工作</span>
        <span class="con3">创思信息以“工匠精神”推动产业互联网升级，推动政府事务单位业务处理自动化，助力工业4.0转型升级！</span>
        <el-button class="find">查找岗位</el-button>
      </div>
      <div class="second" id="second">
        <el-input placeholder="请输入岗位关键字"></el-input>
        <el-select v-model="value" placeholder="位置" class="loaction" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="分类" class="classify" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="选择岗位信息" class="info" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button>找工作</el-button>
        <span>最近热搜词:</span>
        <div class="tag">
          <div>JAVA工程师</div>
          <div>WEB前端工程师</div>
          <div>UI/UX</div>
          <div>行政管理</div>
        </div>
      </div>
      <div class="thirdly" id="thirdly">
        <img src="../assets/img/PopularCategory3.png" alt="">
      </div>
      <div class="fourthly" id="fourthly">
        <img src="../assets/img/TopCompanies.png" alt="">
      </div>
      <div class="fifth">
        <img src="../assets/img/Looking.png" alt="">
        <span class="left_con1">你是不是想在创思找工作?</span>
        <span class="left_con2">我们在线上为您安排了200多个工作岗位，欢迎你咨询！您可查询本网，可快速了解现有岗位情况。</span>
        <el-button class="left_btn">岗位展示</el-button>
        <span class="right_con1">你是不是想在平台发布工作?</span>
        <span class="right_con2">人力资源部、部门经理、项目经理，都可以在此平台发布工作了哦，欢迎试用！</span>
        <el-button class="right_btn">发布工作</el-button>
      </div>
      <div class="user">
        <img src="../assets/img/Testimonial.png" alt="">
      </div>
      <div class="last">
        <img src="../assets/img/Address.png" alt="" class="lastPic">
        <div class="icon_last">
          <img src="../assets/img/flat-color-icons_search.png" alt="">
          <span>创思找工作</span>
        </div>
        <div class="left">
          <span>站内导航</span>
          <a href="#">关于创思</a>
          <a href="#">常见问题</a>
          <a href="#">岗位展示</a>
          <a href="#">薪资说明</a>
        </div>
        <div class="right">
          <span>工作分类</span>
          <a href="#">java工程师</a>
          <a href="#">UI/UX工程师</a>
          <a href="#">web工程师</a>
          <a href="#">行政管理</a>
        </div>
        <div class="email">
          <div class="font">邮箱</div>
          <input type="text">
          <el-button>找工作</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      value: '',
      navBarFixed: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
        // console.log(scrollTop)
      //  当滚动超过 90 时，实现吸顶效果
      if (scrollTop > 90) {
        this.navBarFixed = true
      } else {
        this.navBarFixed = false
      }
    },
    login () {
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 4966px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}
.landingPage{
  /* 落地页 */
  position: relative;
  width: 1440px;
  height: 4966px;
  background: rgb(230, 230, 250);
}
.first{
  width: 1440px;
  height: 771.5px;
  background-image: url(../assets/img/Navbar.png);
}
.nav {
  position: absolute;
  top:23px;
  left: 65px;
  width: 1302px;
  height: 95px;
}
.navBarWrap {
    position:fixed;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1302px;
    height: 95px;
    margin: 0 auto;
    background:rgba(255, 255, 255, 0);
    z-index:999;
  }
.icon{
  float: left;
  position: relative;
  width: 271px;
  height: 95px;
  img{
    width: 95px;
    height: 95px;
  }
  span {
    /* 创思找工作 */
    position: absolute;
    width: 161px;
    height: 38px;
    top: 29px;
    right: 0px;

    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: 0%;
    text-align: left;

  }
}
.navItems{
  float: left;
  display: flex;
  justify-content:space-between;
  width: 492px;
  height: 28px;
  margin-top: 36px;
  margin-left: 147.41px;
  color: rgb(255, 255, 255);
  font-family: Roboto;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: left;
  a {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }
}
.buttonDiv {
  margin-top: 22px;
  margin-left: 72px;
  width: 177px;
  height: 55px;
  font-family: Roboto;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  border: black;
    }
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){
  border-radius: 8px;
  color: rgb(255, 255, 255);
  background: rgb(30, 30, 30);
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.buttonDiv:focus, .buttonDiv:hover{
    background: rgb(30, 30, 30);
    color: rgb(255, 255, 255);
}
/*鼠标按下，没有抬起*/
.buttonDiv:active {
    background: #2794f8;
    color: white;
}
.con1{
  /* 269+ 岗位需求 */
  position: absolute;
  width: 360px;
  height: 60px;
  top: 218px;
  left: 67px;

  color: rgb(255, 255, 255);
  font-family: Roboto;
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: 0%;
  text-align: left;
}
.con2{
  /* 预祝你在创思信息找到心仪工作 */
  position: absolute;
  width: 784px;
  height: 66px;
  top: 306px;
  left: 65px;
  color: rgb(255, 255, 255);
  font-family: Roboto;
  font-size: 56px;
  font-weight: 400;
  line-height: 66px;
  letter-spacing: 0%;
  text-align: left;
}
.con3 {
  /* 创思信息以“工匠精神”推动产业互联网升级，推动政府事务单位业务处理自动化，助力工业4.0转型升级！ */
  position: absolute;
  width: 528px;
  height: 143px;
  top: 404px;
  left: 65px;
  color: rgb(255, 255, 255);
  font-family: Roboto;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: left;
}
.find {
  margin-top: 531px;
  margin-left: 65px;
  width: 145px;
  height: 51px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0%;
  text-align: center;
  border: black;
    }
.find, .find:focus:not(.find:hover){
  border-radius: 8px;
  color: rgb(255, 255, 255);
  background: rgb(30, 30, 30);
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.find:focus, .find:hover{
    background: rgb(30, 30, 30);
    color: rgb(255, 255, 255);
}
/*鼠标按下，没有抬起*/
.find:active {
    background: #2794f8;
    color: white;
}
.second{
  position: relative;
  height: 204.5px;
  width: 1440px;
  .el-input{
    position: absolute;
    top: 32.5px;
    left: 178px;
    width: 220px;
    box-sizing: border-box;
    border-radius: 8px;
    ::v-deep .el-input__inner {
      border: 1px solid rgb(77, 77, 219);
      height: 55px;
    }
  }
  .loaction {
    position: absolute;
    top: 32.5px;
    left: 425px;
    width: 120px;
    box-sizing: border-box;
    border-radius: 8px;
    ::v-deep .el-input__inner {
      border: 1px solid rgb(77, 77, 219);
      height: 55px;
    }
  }
  .classify {
    position: absolute;
    top: 32.5px;
    left: 607px;
    width: 154px;
    box-sizing: border-box;
    border-radius: 8px;
    ::v-deep .el-input__inner {
      height: 55px;
      border: 1px solid rgb(77, 77, 219);
    }
  }
  .info {
    position: absolute;
    top: 32.5px;
    left: 826px;
    width: 234px;
    box-sizing: border-box;
    border-radius: 8px;
    ::v-deep .el-input__inner {
      border: 1px solid rgb(77, 77, 219);
      height: 55px;
    }
  }
  .el-button {
    position: absolute;
    top: 32.5px;
    right: 178px;
    width: 140px;
    height: 55px;

    background: rgb(42, 42, 209);
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: center;
  }
  span {
    position: absolute;
    top: 119.5px;
    left: 177px;
    width: 125px;
    height: 23px;
    color: rgb(0, 0, 0);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
  }
  .tag {
    display: flex;
    justify-content:space-between;
    position: absolute;
    top: 111.5px;
    right:361px;
    width: 777px;
    height: 41px;
    div{
      display: flex;
      flex-shrink: 1;
      align-items: center;
      padding: 0px 40px;
      background: rgb(77, 77, 219);
      border-radius: 4px;
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 20px;
      font-weight: 400;
      line-height: 23px;
      letter-spacing: 0%;
      text-align: center;
    }
  }
}
.thirdly{
  width: 1440px;
  height: 946px;
  img {
    width: 100%;
    height: 100%;
  }
}
.fourthly{
  padding: 0px 70px;
  width: 1280px;
  height: 496px;
  img {
    width: 100%;
    height: 100%;
  }
}
.fifth{
  position: relative;
  width: 1440px;
  height: 1122px;
  img{
    width: 100%;
    height: 100%;
  }
  .left_con1{
    position: absolute;
    width: 417px;
    height: 70px;
    top: 377px;
    left: 65px;
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 36px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 0%;
    text-align: left;
  }
  .left_con2{
    position: absolute;
    width: 558px;
    height: 70px;
    top: 468px;
    left: 65px;

    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
  }
  .left_btn{
    position: absolute;
    top: 570px;
    left: 65px;
    width: 145px;
    height: 51px;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0%;
    text-align: center;
    border: black;
  }
  .left_btn, .left_btn:focus:not(.left_btn:hover){
    border-radius: 8px;
    color: rgb(255, 255, 255);
    background: rgb(30, 30, 30);
  }
  /*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
  .left_btn:focus, .left_btn:hover{
      background: rgb(30, 30, 30);
      color: rgb(255, 255, 255);
  }
  /*鼠标按下，没有抬起*/
  .left_btn:active {
      background: #2794f8;
      color: white;
  }
  .right_con1{
    position: absolute;
    width: 513px;
    height: 70px;
    top: 379px;
    right: 223px;
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 36px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 0%;
    text-align: left;
  }
  .right_con2{
    position: absolute;
    width: 558px;
    height: 70px;
    top: 468px;
    right: 178px;

    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0%;
    text-align: left;
  }
  .right_btn{
    position: absolute;
    top: 570px;
    right: 590px;
    width: 145px;
    height: 51px;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0%;
    text-align: center;
    border: black;
  }
  .right_btn, .right_btn:focus:not(.right_btn:hover){
    border-radius: 8px;
    color: rgb(255, 255, 255);
    background: rgb(30, 30, 30);
  }
  /*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
  .right_btn:focus, .right_btn:hover{
      background: rgb(30, 30, 30);
      color: rgb(255, 255, 255);
  }
  /*鼠标按下，没有抬起*/
  .right_btn:active {
      background: #2794f8;
      color: white;
  }
}
.user{
  position: absolute;
  top: 3518px;
  left: 35px;
  width: 1358px;
  height: 574px;
  img {
    width: 100%;
    height: 100%;
  }
}
.last {
  position: absolute;
  bottom: 0px;
  width: 1440px;
  height: 904px;
  .lastPic{
    width: 100%;
    height: 100%;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 281px;
    left: 623px;
    width: 129px;
    height: 256px;
    span {
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 32px;
      font-weight: 500;
      line-height: 38px;
      letter-spacing: 0%;
      text-align: left;
    }
    a{
      text-decoration: none;
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 24px;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 0%;
      text-align: left;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 281px;
    right: 488px;
    width: 135px;
    height: 256px;
    span {
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 32px;
      font-weight: 500;
      line-height: 38px;
      letter-spacing: 0%;
      text-align: left;
    }
    a{
      text-decoration: none;
      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 24px;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 0%;
      text-align: left;
    }
  }
  .icon_last {
    position: absolute;
    top: 241px;
    left: 63px;
    width: 271px;
    height: 95px;
    img{
      width: 95px;
      height: 95px;
    }
    span {
      /* 创思找工作 */
      position: absolute;
      width: 161px;
      height: 38px;
      top: 29px;
      right: 0px;

      color: rgb(255, 255, 255);
      font-family: Roboto;
      font-size: 32px;
      font-weight: 400;
      line-height: 38px;
      letter-spacing: 0%;
      text-align: left;

    }
  }
}
.email {
  /* Form Subribe */
  position: absolute;
  width: 348px;
  height: 55px;
  bottom: 498px;
  right: 65px;
  box-sizing: border-box;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 7px;
  .font{
    position: absolute;
    bottom: 11px;
    left: 11px;
    width: 48px;
    height: 28px;
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 24px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: left;
  }
  input {
    position: absolute;
    top: 0px;
    left: 60px;
    width: 170px;
    height: 100%;
    padding: 0px;
    background-color: #000000;
    border: transparent;
    outline:none;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 24px;
    font-weight: 400;
    line-height: 55px;
    letter-spacing: 0%;
    text-align: left;
  }
  .el-button {
    padding: 0px;
    position: absolute;
    top: 7.5px;
    right: 6px;
    width: 122px;
    height: 40px;
    border: 1px solid rgb(42, 42, 209);
    background: rgb(42, 42, 209);
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
  }
  .el-button, .el-button:focus:not(.el-button:hover){
    border-radius: 8px;
    color: rgb(255, 255, 255);
  }
  /*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
  .el-button:focus, .el-button:hover{
      color: rgb(255, 255, 255);
  }
  /*鼠标按下，没有抬起*/
  .el-button:active {
      background: #2794f8;
      color: white;
  }
}
</style>
